import React, { Component } from 'react'
import "./make.scss"
import Axios from "axios"
export default class Hot extends Component {

    state = {
        HotList: [],
    }
    componentDidMount() {
        Axios.get("./json/Live2.json").then(res => {
            // console.log(res.data.data.lives)
            this.setState({
                HotList: res.data.data.lives,
            })
        })

    }
    render() {
        return (
            <div className="make">
                {this.state.HotList && this.state.HotList.map((v, index) => {
                    return (
                        <div className="make-box" key={v.roomId}>
                            <div className="box-header">
                                <img src={v.avatar} alt="" className="header-img" />
                                <span className="header-name">{v.userName}</span>
                            </div>
                            <div className="box-contents">
                                <img src={v.bgImg} alt="" className="contents-img" />
                                <div className="contents-box">
                                    <div className="box-info">
                                        <div className="info-dot"></div> {/*呼吸灯 动画效果不写*/}
                                        <div className="info-status">直播中</div> {/* 直播状态 判断ture为直播中，fales为未直播，但是列表全为tuer，省略判断*/}
                                        <div className="info-num">{v.visitorCount}</div>  {/* 观看人数 按万人计算，取下限*/}
                                    </div>
                                    <div className="box-title">{v.intro}</div>
                                    <div className="box-img">
                                        {v.shopCarts.goods.map((val,i)=>{
                                            return(
                                            <div key={i}>
                                                <img src={val.cover} alt="" className="img-list" />
                                            </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}
